<template>
  <div>
    <Form ref="menuForm" :model="menu" :rules="ruleValidate" label-position="right" :label-width="110">
      <Row :gutter="2">
        <h4>菜单信息</h4>
        <Col span="12" push="3">
          <FormItem prop="path" label="路径：">
            <Input type="text" v-model="menu.path" placeholder="请输入路径名称" clearable style="width: auto"/>
          </FormItem>
          <FormItem prop="name" label="路径名称：">
            <Input type="text" v-model="menu.name" prefix="ios-phone-portrait" placeholder="请输入路径名称" clearable style="width: auto"/>
          </FormItem>
          <FormItem prop="modular" label="模块：">
            <Input type="text" v-model="menu.modular" prefix="ios-contact" placeholder="请输入模块名称" clearable style="width: auto"/>
          </FormItem>
          <FormItem prop="component" label="组件：">
            <Input type="text" v-model="menu.component" prefix="ios-contact" placeholder="请输入组件名称" clearable style="width: auto"/>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="是否子菜单：">
            <i-switch size="large" v-model="menu.isSub">
              <span slot="open">是</span>
              <span slot="close">否</span>
            </i-switch>
          </FormItem>
          <FormItem label="父菜单：">
            <Input type="number" v-model="menu.parentId" number placeholder="请输入父菜单菜单" style="width: auto"/>
          </FormItem>
          <FormItem label="菜单顺序：">
            <Input type="number" v-model="menu.sort" number placeholder="请输入菜单顺序" style="width: auto"/>
          </FormItem>
          <FormItem label="启用状态：">
            <i-switch size="large" v-model="menu.enable">
              <span slot="open">ON</span>
              <span slot="close">OFF</span>
            </i-switch>
          </FormItem>
        </Col>
      </Row>

      <h4>菜单元信息(meta)</h4>
      <Row :gutter="2">
        <Col span="12" push="3">
          <FormItem prop="meta.title" label="菜单名称：">
            <Input type="text" v-model="menu.meta.title" placeholder="请输入菜单名称" clearable style="width: auto"/>
          </FormItem>
          <FormItem prop="meta.icon" label="菜单图标：">
            <Input type="text" v-model="menu.meta.icon" placeholder="请输入菜单图标" clearable style="width: auto"/>
          </FormItem>
          <FormItem prop="meta.icon" label="钩子函数：">
            <Input type="text" v-model="menu.meta.beforeCloseName" placeholder="请输入钩子函数" clearable style="width: auto"/>
          </FormItem>
          <FormItem prop="meta.icon" label="外部连接：">
            <Input type="text" v-model="menu.meta.href" placeholder="请输入钩子函数" clearable style="width: auto"/>
          </FormItem>
          <FormItem prop="meta.icon" label="权限数组：">
            <Input disabled type="text" v-model="menu.meta.access" placeholder="请输入权限数组" clearable style="width: auto"/>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem label="父菜单显示：">
            <i-switch size="large" v-model="menu.meta.showAlways">
              <span slot="open">ON</span>
              <span slot="close">OFF</span>
            </i-switch>
          </FormItem>
          <FormItem label="面包屑导航：">
            <i-switch size="large" v-model="menu.meta.hideInBread" true-color="grey" false-color="#FF7F24">
              <span slot="open">OFF</span>
              <span slot="close">ON</span>
            </i-switch>
          </FormItem>
          <FormItem label="显示菜单：">
            <i-switch size="large" disabled v-model="menu.meta.hideInMenu" true-color="grey" false-color="#FF7F24">
              <span slot="open">OFF</span>
              <span slot="close">ON</span>
            </i-switch>
          </FormItem>
          <FormItem label="页面缓存：">
            <i-switch size="large" v-model="menu.meta.notCache" true-color="graey" false-color="#FF7F24">
              <span slot="open">OFF</span>
              <span slot="close">ON</span>
            </i-switch>
          </FormItem>
        </Col>
      </Row>

      <FormItem :style="{padding: '0 400px'}">
        <Row>
          <Col span="8">
            <Button type="success" icon="md-checkmark" @click="handleSubmit">保存</Button>
          </Col>
          <Col span="8">
            <Button type="error" icon="md-return-left" @click="handleReset">重置</Button>
          </Col>
          <Col span="8">
            <Button type="warning" icon="md-close" @click="handleCloseTag">关闭</Button>
          </Col>
        </Row>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import { mapMutations, mapActions } from 'vuex'
export default {
  props: {
    tMenu: {
      type: Object,
      default: () => null
    },
    routeName: String
  },
  name: 'OneMenuPage',
  data () {
    return {
      menu: { meta: {} },
      ruleValidate: {
        path: [
          { required: true, message: '路径不能为空', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '路径名称不能为空', trigger: 'blur' }
        ],
        modular: [
          { required: true, message: '模块不能为空', trigger: 'blur' }
        ],
        component: [
          { required: true, message: '组件不能为空', trigger: 'blur' }
        ],
        // meta
        'meta.title': [
          { required: true, message: '菜单名称不能为空', trigger: 'blur' }
        ],
        'meta.icon': [
          { required: true, message: '图标不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    ...mapMutations([
      'closeTag'
    ]),
    ...mapActions([
    ]),
    handleSubmit () {
      this.$refs.menuForm.validate(v => {
        if (v) this.$emit('submit', this.menu)
      })
    },
    handleReset () {
      if (this.tMenu) this.menu = { ...this.tMenu }
      else this.menu = { meta: {} }
    },
    handleCloseTag () {
      this.closeTag({ name: this.routeName })
      sessionStorage.removeItem('selectionMenu')
    }
  },
  created () {
    if (this.tMenu) this.menu = { ...this.tMenu }
  }
}
</script>
<style scoped>
  h4 {
    font-weight: 500;
    color: #6379bb;
    font-size: 15px;
    border-bottom: 1px solid #ddd;
    margin: 8px 10px 25px 10px;
    padding-bottom: 5px;
  }
</style>
